<template>
  <div class="tab-bar-item" @click="itemClick">
    <div v-if="isActive">
      <slot name="item-img-active"></slot>
    </div>
    <div v-else>
      <slot name="item-img"></slot>
    </div>
    <div :style="{ color: isActive ? activeColor : color }">
      <slot name="item-text"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props: {
    link: String,
    color: {
      type: String,
      default: "#000"
    },
    activeColor: {
      type: String,
      default: "#f00"
    }
  },
  data() {
    return {};
  },
  computed: {
    isActive() {
      return this.$route.path === this.link;
    }
  },
  methods: {
    itemClick() {
      this.$router.replace(this.link).catch(err => err);
    }
  },
  components: {}
};
</script>

<style scoped>
.tab-bar-item {
  flex: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 12px;
  line-height: 1;
}
.tab-bar-item img {
  width: 24px;
  height: 24px;
}
</style>
